<template>
  <div class="function-area">
    <div class="function-title-area">
      <div class="function-area-title-piece"></div>
      <div class="function-area-title">门店/客服信息</div>
    </div>
    <el-divider></el-divider>
    <div class="info-list">
      <template v-for="(item, index) in mendian_customer_server_info.mendian_list">
        <div class="info-card">
          <div class="first-row">
            <div class="info-card-sort">门店 {{ index + 1 }}</div>
            <div class="info-card-button">
              <el-button v-if="mendian_customer_server_info.mendian_list.length > 1" type="text" class="button-style" @click="removeMendian(index)">
                <i class="el-icon-error"></i>
              </el-button>
            </div>
          </div>
          <div class="info-row">
            <div class="info-row-key">
              <span>门店名称</span>
            </div>
            <div class="info-row-value">
              <el-input style="width: 90%; padding-left: 10px;" v-model="item.name"
                        placeholder="请输入门店名称" ></el-input>
            </div>
          </div>
          <div class="info-row">
            <div class="info-row-key">
              <span>门店地址</span>
            </div>
            <div class="info-row-value">
              <el-input style="width: 90%; padding-left: 10px;" v-model="item.address">
                <el-button slot="append" size="mini">选择</el-button>
              </el-input>
            </div>
          </div>
          <div class="info-row">
            <div class="info-row-key">
              <span>门牌号</span>
            </div>
            <div class="info-row-value">
              <el-input style="width: 90%; padding-left: 10px;" v-model="item.door"
                        placeholder="请输入门牌号"></el-input>
            </div>
          </div>
          <template v-for="(item_mobile, index_mobile) in mendian_customer_server_info.mendian_list[index].contact_mobile">
            <div class="info-row">
              <div class="info-row-key">
                <span>联系电话</span>
              </div>
              <div class="info-row-value">
                <el-input style="width: 90%; padding-left: 10px;" v-model="mendian_customer_server_info.mendian_list[index].contact_mobile[index_mobile]"
                          placeholder="请输入联系电话"></el-input>
                <el-button v-if="mendian_customer_server_info.mendian_list[index].contact_mobile.length > 1"
                           type="text" class="button-style"
                           @click="removeMendianContactMobile(index,index_mobile)">
                  <i class="el-icon-error"></i>
                </el-button>
              </div>
            </div>
          </template>
          <div class="info-row-button">
            <el-button type="text" icon="el-icon-plus" @click="addMendianContactMobile(index)">点击增加联系电话</el-button>
          </div>
        </div>
      </template>
    </div>
    <div class="add-mendian-button">
      <el-button class="mendian-button" icon="el-icon-plus" @click="addMendian">点击添加门店</el-button>
    </div>
    <div class="mendian-info-card">
      <span class="mendian-info-card-tile">门店信息卡片</span>
      <span class="mendian-info-card-tile-desc">活动页面显示门店信息卡片</span>
      <span class="mendian-info-switch"><el-switch v-model="mendian_customer_server_info.page_is_show_mendian_info"></el-switch></span>
    </div>
    <div class="mendian-custom">
      <div class="mendian-custom-title">高级自定义选项</div>
      <div class="mendian-custom-desc">客服二维码等</div>
      <div class="mendian-custom-button">
        <el-button v-if="!mendian_custom" type="text" @click="mendian_custom = true">展开
          <i class="el-icon-arrow-down"></i></el-button>
        <el-button v-if="mendian_custom" type="text" @click="mendian_custom = false">收起
          <i class="el-icon-arrow-up"></i></el-button>
      </div>
    </div>
    <div v-if="mendian_custom" class="custom-area">
      <div class="customer-server">
        <span class="customer-server-title">客服二维码</span>
        <span class="customer-server-desc">联系商家弹窗中，显示客服二维码</span>
        <span class="customer-server-switch"><el-switch v-model="mendian_customer_server_info.is_show_customer_server_qr_code"></el-switch></span>
      </div>

      <div class="upload-qr">
        <div class="upload-qr-title">上传二维码</div>
        <div class="upload-qr-upload">
          <SingleImageUpload :isShowTip="false" v-model="mendian_customer_server_info.customer_server_qr_code"/>
        </div>
      </div>

      <div class="custom-area-child">
        <div class="staff-qr">
          <span class="staff-qr-title">员工转发显示个人二维码</span>
          <span class="staff-qr-switch"><el-switch v-model="mendian_customer_server_info.staff_share_is_show_qr_code"></el-switch></span>
          <p>1.商家转发活动出去，活动联系模块，支持添加商家二维码</p>
          <p>2.员工转发活动出去，活动联系模块，支持添加员工二维码</p>
        </div>
        <div class="customer_server_pop">
          <span class="customer_server_pop-title">下单后显示添加客服微信弹窗</span>
          <span class="customer_server_pop-switch"><el-switch v-model="mendian_customer_server_info.is_show_customer_server_pop_info"></el-switch></span>
          <el-input class="pop-info-input"
                    v-model="mendian_customer_server_info.customer_server_pop_info"
                    placeholder="请输入引导话术" maxlength="30"></el-input>
        </div>
      </div>

      <div class="mendian-avatar">
        <span class="mendian-avatar-title">自定义门店头像</span>
        <span class="mendian-avatar-desc">不修改默认使用账号头像</span>
        <span class="mendian-avatar-switch"><el-switch v-model="mendian_customer_server_info.is_show_custom_mandian_avatar"></el-switch></span>
      </div>

      <div class="mendian-avatar-upload">
        <div class="mendian-avatar-upload-title">上传头像图片</div>
        <div class="upload">
          <SingleImageUpload :isShowTip="false" v-model="mendian_customer_server_info.custom_mandian_avatar"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MendianCustomerServerConfig",
  props: ['mendian_customer_server_info'],
  data() {
    return {
      mendian_custom: false
    }
  },
  methods: {
    /** 移除门店信息 */
    removeMendian(index) {
      this.$emit('remove-mendian-item',index);
    },
    /** 添加门店信息 */
    addMendian() {
      this.$emit('add-mendian-item');
    },
    /** 添加门店联系电话 */
    addMendianContactMobile(index) {
      this.$emit('add-mendian-contact-mobile-item',index);
    },
    /** 移除门店联系电话 */
    removeMendianContactMobile(index,index_mobile) {
      this.$emit('remove-mendian-contact-mobile-item',index,index_mobile);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 5px;
}

::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}

.function-area {
  margin-top: 10px;
  padding-left: 10px;
  .function-title-area {
    display: flex;
    position: relative;

    .function-area-title-piece {
      width: 5px;
      height: 30px;
      background-color: #2254f5;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .function-area-title {
      width: 100%;
      height: 40px;
      font-size: 18px;
      font-weight: bold;
      color: #2254f5;
      padding-left: 10px;
      align-content: center;
    }
  }
  .info-list {
    margin: 5px 0;
    .info-card {
      width: 100%;
      background-color: #f6f7f9;
      margin-top: 10px;
      border-radius: 5px;
      padding: 0 0 10px 0;
      .first-row {
        display: flex;
        height: 50px;
        .info-card-sort {
          width: 80px;
          height: 100%;
          font-size: 14px;
          font-weight: bold;
          border-radius: 5px 0;
          text-align: center;
          align-content: center;
        }
        .info-card-button {
          width: calc(100% - 80px);
          text-align: right;
          color: #81878e;
          .button-style {
            padding: 0;
            color: #74777b;
          }
        }
      }
      .info-row {
        display: flex;
        margin: 0 0 20px;
        .info-row-key {
          width: 80px;
          font-size: 14px;
          padding-left: 20px;
          align-content: center;
        }
        .info-row-value {
          width: calc(100% - 70px);
          align-content: center;
          .button-style {
            padding: 0;
            color: #74777b;
          }
        }
        .contact-mobile-button {
          color: #81878e;
          .button-style {
            padding: 0;
            color: #74777b;
          }
        }
      }
      .info-row-button {
        text-align: center;
      }
    }
  }
  .add-mendian-button {
    width: 100%;
    text-align: center;
    align-content: center;
    padding: 10px 0;
    .mendian-button {
      width: 100%
    }
  }
  .mendian-info-card {
    padding: 20px 0;
    position: relative;
    .mendian-info-card-tile {
      font-size: 14px;
      font-weight: bold;
    }
    .mendian-info-card-tile-desc {
      font-size: 12px;
      color: rgba(0,0,0,0.5);
      padding-left: 10px;
    }
    .mendian-info-switch {
      position: absolute;
      right: 10px;
    }
  }
  .mendian-custom {
    padding: 20px 0 10px 0;
    display: flex;
    .mendian-custom-title {
      min-width: 100px;
      font-size: 14px;
      font-weight: bold;
      color: #ff4d20;
      align-content: center;
    }
    .mendian-custom-desc {
      padding-left: 10px;
      width: 300px;
      font-size: 12px;
      align-content: center;
      color: rgba(0, 0, 0, 0.5);
    }
    .mendian-custom-button {
      width: 100px;
      align-content: center;
      text-align: right;
    }
  }
  .custom-area {
    width: 100%;
    height: auto;
    padding: 20px;
    background-color: #f6f7f9;
    .customer-server {
      position: relative;
      margin-bottom: 20px;
      .customer-server-title {
        font-size: 14px;
        font-weight: bold;
      }
      .customer-server-desc {
        font-size: 12px;
        color: rgba(0,0,0,0.5);
        padding-left: 10px;
      }
      .customer-server-switch {
        position: absolute;
        right: 1px;
      }
    }
    .upload-qr {
      display: flex;
      margin-bottom: 20px;
      font-size: 14px;
      .upload-qr-title {
        width: 50%;
        align-content: center;
      }
      .upload-qr-upload {
        width: 50%;
        text-align: right;
      }
    }
    .custom-area-child {
      width: 100%;
      background-color: white;
      padding: 20px;
      margin-bottom: 20px;
      .staff-qr {
        position: relative;
        margin-bottom: 20px;
        .staff-qr-title {
          font-size: 14px;
        }
        .staff-qr-switch {
          position: absolute;
          right: 1px;
        }
        p {
          font-size: 12px;
          color: rgba(0,0,0,0.5);
          margin: 5px;
        }
      }
      .customer_server_pop {
        position: relative;
        margin-bottom: 20px;
        .customer_server_pop-title {
          font-size: 14px;
        }
        .customer_server_pop-switch {
          position: absolute;
          right: 1px;
        }
        .pop-info-input {
          padding-top: 10px;
        }
      }
    }
    .mendian-avatar {
      position: relative;
      margin-bottom: 20px;
      .mendian-avatar-title {
        font-size: 14px;
        font-weight: bold;
      }
      .mendian-avatar-desc {
        font-size: 12px;
        color: rgba(0,0,0,0.5);
        padding-left: 10px;
      }
      .mendian-avatar-switch {
        position: absolute;
        right: 1px;
      }
    }
    .mendian-avatar-upload {
      display: flex;
      margin-bottom: 20px;
      font-size: 14px;
      .mendian-avatar-upload-title {
        width: 50%;
        align-content: center;
      }
      .upload {
        width: 50%;
        text-align: right;
      }
    }
  }
}
</style>
